<template>
    <el-drawer title="偏差" size="500px" :close-on-click-modal="false" v-if="dialogVisible" direction="rtl"
        @close="handleCloseDialog" :visible="dialogVisible">
        <el-form :model="ruleForm" class="devition-form" :rules="rules" ref="ruleForm" style="width: 400px" label-width="140px"
            :disabled="disable">
            <el-form-item label="变更类型" prop="change_type">
                <el-select v-model="ruleForm.change_type" placeholder="请选择文件类型">
                    <el-option v-for="item in typeData" :label="item.label" :value="item.val + ''"
                        :key="item.val"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="变更人" prop="change_user_id">
                <el-select v-model="ruleForm.change_user_id" filterable clearable>
                    <el-option v-for="handler in staffData" :key="handler.id" :label="handler.name"
                        :value="handler.id + ''" />
                </el-select>
            </el-form-item>
            <el-form-item label="变更时间" prop="change_time">
                <el-date-picker v-model="ruleForm.change_time" type="datetime" placeholder="选择日期时间"
                    value-format="timestamp">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="变更内容" prop="change_content">
                <el-input type="textarea" v-model="ruleForm.change_content"></el-input>
            </el-form-item>
        </el-form>
        <div class="dialog-footer" style="text-align: center;padding-top: 20px;">
            <el-button @click="handleCloseDialog">取 消</el-button>
            <el-button type="primary" @click="handleClickSubmit">确 定</el-button>
        </div>
    </el-drawer>
</template>

<script>
import { ChangeCreate, ChangeDetail, ChangeUpdate } from '@/api/qms.js';
import { timestamp10 } from "@/utils/mUtils";
import { AdminBox } from "@/api/customer";

export default {
    name: 'deviation',
    components: {},
    props: ['dialogVisible', 'mode', 'id'],
    data() {
        return {
            ruleForm: {
                change_type: '', // 变更类型
                change_user_id: '', // 变更人
                change_time: '', // 变更时间
                change_content: '' // 变更内容
            },
            rules: {
                change_type: [
                    { required: true, message: '请选择变更类型', trigger: 'change' }
                ],
                change_user_id: [
                    { required: true, message: '请选择变更人', trigger: 'change' }
                ],
                change_time: [
                    { required: true, message: '请选择变更时间', trigger: 'change' }
                ],
                change_content: [
                    { required: true, message: '请输入变更内容', trigger: 'blur' }
                ]
            },
            typeData: [{
                val: '0',
                label: '客户变更'
            }, {
                val: '1',
                label: '承运商变更'
            }, {
                val: '2',
                label: '内部变更'
            }, {
                val: '3',
                label: '质量文件变更'
            }],
            staffData: []
        };
    },
    computed: {
        disable() {
            return this.mode === 'detail';
        },


    },
    mounted() {
        if (this.mode === 'edit' || this.mode === 'detail') {
            this.getDetail();
        }
        AdminBox({
            "user_type": "0",
        }).then(res => {
            this.staffData = res.data;
        });
    },
    methods: {
        handleCloseDialog() {
            this.$emit('close');
        },

        getDetail() {
            ChangeDetail({
                id: this.id
            }).then(res => {
                const data = res.data;
                data.change_time = data.change_time * 1000 || '';
                this.ruleForm = data;
            });
        },
        handleClickSubmit() {
            this.$refs["ruleForm"].validate((valid) => {
                if (!valid) return;
                let _ruleForm = {
                    ...this.ruleForm,
                    change_time: timestamp10(this.ruleForm.change_time),
                };
                if (this.mode === 'add') {
                    ChangeCreate(_ruleForm).then(res => {
                        if (res.code === 10000) {
                            this.$message({
                                message: "新建成功",
                                type: "success",
                            });
                            this.$emit('close', true);
                        }
                    });
                } else {
                    ChangeUpdate(_ruleForm).then(res => {
                        if (res.code === 10000) {
                            this.$message({
                                message: "修改成功",
                                type: "success",
                            });
                            this.$emit('close', true);
                        }
                    });
                }
            });
        }


    },
};
</script>
<style lang="scss" scoped>
.wrapper {
    .devition-form {
        .el-input {
            width: 200px;
        }

        .el-select,
        .el-cascader,
        .el-radio-group {
            width: 200px;
        }

        .el-textarea {
            width: 200px
        }

    }
}
</style>